<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
<!--    安装Vue-->
    <script src="js/vue.js"></script>

    <style>
        .divList{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            overflow: auto;/*hidden:超出部分就会隐藏,auto：超出部分会显示鼠标下拉条*/
        }
        .item{
            width: 300px;
            height: 200px;
        }
    </style>

</head>
<body>

<!--
    Vue当中提供的事件修饰符
    .stop : 停止事件冒泡,等同于stopPropagation()
    .prevent : 等同于 event.preventDefault() 阻止事件的默认行为
    .capture : 添加事件监听器时使用事件捕获模式
                添加事件监听器包括两种不同的方式:【这个在原生js的时候是学过的】
                    一种是从内到外添加 (事件冒泡模式)
                    一种是从外到内添加 (事件捕获模式)
    .self:这个事件如果是"我自己的元素"上发生的事件,这个事件不是别人传递给我的事件,否则执行对应的程序 【e.target要等于我自己】
    .once : 事件只发生一次
    .passive : passive翻译为顺从/不抵抗。无需等待,直接继续(立即)执行事件的默认行为
                .passive和.prevent修饰符是对立的，不可以共存 (如果一起使用,就会报错)
                .prevent : 阻止事件的默认行为
                .passive : 解除阻止
-->


<div id="app">
    <h1>{{msg}}</h1>
    <a href="https://www.baidu.com" @click.prevent="yi">百度</a><br/>

    <!--停止事件冒泡-->
    <div @click="san">
        <div @click.stop="er">
            <button @click="yi">事件冒泡</button>
        </div>
    </div>

    <!--
        添加事件监听器时使用事件捕获模式
        3 -> 1 -> 2
        先执行捕获模式   3   然后再执行冒泡模式 1 -> 2
    -->
    <div @click.capture="san">
        <!--这里没有添加.capture修饰符,以下这个元素,以及这个元素的子元素,都会采用冒泡模式-->
        <div @click="er">
            <button @click="yi">添加事件监听器的时候采用事件捕获模式</button>
        </div>
    </div>
    <br/>

    <!--.self修饰符-->
    <div @click="san">
        <!--.self 仅当事件时从元素自身触发的时候才执行  所以这里 1和3执行  2是不执行的-->
        <div @click.self="er">
            <button @click="yi">self修饰符</button>
        </div>
    </div>

    <!--
        在Vue当中，事件修饰符是可以多个联合使用的
        但是需要注意的是:
            @click.self.stop : 先.self , 再 stop
            @click.stop.self : 先.stop , 再.self\
        都是按照顺序来做的
    -->

    <div @click="san">
        <div @click="er">
            <button @click.self.stop="yi">self修饰符配合</button>
        </div>
    </div>


    <br/>
    <button @click.once="yi">事件只发生一次</button>

    <!-- .passive修饰符  .passive 提升滚动性能 ， 会直接的去执行默认行为 ， 阻止默认行为这个事件就废弃掉了 两个只能存在一个-->
    <div class="divList" @wheel.passive="testPassive">
        <div class="item">div1</div>
        <div class="item">div2</div>
        <div class="item">div3</div>
    </div>


</div>


<!--vue代码-->
<script>
    const vm = new Vue({
        el : '#app',
        data : {
            msg : '事件修饰符'
        },
        methods : {
            yi(event){
                // alert('去百度!!!')
                //手动调用事件对象的preventDefault()方法,可以阻止事件的默认行为
                //在Vue当中,这种事件的默认行为可以不采用调用DOM的方式来完成,可以使用事件修饰符:prevent
                // event.preventDefault()
                alert(1)
            },
            er(){
                alert(2)
            },
            san(){
                alert(3)
            },
            testPassive(event){
                for(let i = 0; i < 100000 ; i++){
                    console.log('text passive')
                }
                //阻止事件的默认行为 , 这样的话 滚动条就不会有什么变化了
                event.preventDefault()
            }
        }
    })
</script>

</body>
</html>